<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import { computed, onMounted, ref } from 'vue'
import { getIlluminationData } from '@/api/environmentalDataController.ts'

const dateList = ref<string[]>()
const valueList = ref<number[]>()

const fetchIlluminationData = async () => {
  const res = await getIlluminationData()
  dateList.value = res.data.data?.dataTimestampList
  valueList.value = res.data.data?.illuminationList
}

onMounted(() => {
  fetchIlluminationData()
})

const options = computed(() => {
  return {
    visualMap: [
      {
        show: false,
        type: 'continuous',
        seriesIndex: 0,
        min: 0,
        max: 400,
      },
    ],
    title: {
      left: 'center',
      text: '光照强度分析',
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        const { name, value } = params[0]
        return `${name}<br>光照强度：${value} lux`
      },
    },
    xAxis: {
      name: '时间',
      type: 'category',
      boundaryGap: false,
      data: dateList.value,
    },
    yAxis: {
      name: '光照强度 (lux)',
      type: 'value',
      min: 0,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    series: [
      {
        type: 'line',
        showSymbol: true,
        symbol: 'circle',
        symbolSize: 6,
        data: valueList.value,
        lineStyle: {
          width: 3,
          type: 'arrow', // 设置线条类型为箭头
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#1E90FF' },
              { offset: 0.5, color: '#FFD700' },
              { offset: 1, color: '#CD5C5C' },
            ],
          },
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(255, 215, 0, 0.3)' },
              { offset: 1, color: 'rgba(30, 144, 255, 0.1)' },
            ],
          },
        },
      },
    ],
  }
})
</script>

<template>
  <div class="data-illumination-analyze">
    <a-card title="光照强度分析">
      <v-chart :option="options" style="height: 60vh; max-width: 100%" />
    </a-card>
  </div>
</template>

<style scoped></style>
